<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Clock</title>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      background: linear-gradient(to right bottom, #7d7d7d, #070707);
    }

    li {
      list-style: none;
      height: 30px;
      width: 30px;
      margin: 0;
      padding: 0;
      font-size: 22ox;
      line-height: 30px;
      color: #bbbbbb;
    }

    .container {
      width: 100%;
      position: fixed;
      top: 50%;
      left: 50%;
      z-index: 4;
      transform: translate(-50%, -50%);
    }

    .clock {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      width: 500px;
      height: 30px;
      margin: 50% auto;
      background-color: #3b3b3b;
      box-shadow: 2px 2px 10px 3px #2f2f2f;
      transform: translateY(-50%);
      border-radius: 20px;
    }

    .time-box {
      width: 30px;
      height: 100%;
    }

    .numbers {
      background-color: #272727;
      box-shadow: 2px 2px 10px 3px #2f2f2f;
      text-align: center;
      border-radius: 10px;
      transition: all 0.5s;
    }
  </style>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
  <div class="clock">
    <div class="time-box">
      <div class="numbers" id="hours-first">
        <li>0</li>
        <li>1</li>
        <li>2</li>
      </div>
    </div>
    <div class="time-box">
      <div class="numbers" id="hours-second">
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
      </div>
    </div>
    <div class="time-box">
      <div class="numbers" id="minutes-first">
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </div>
    </div>
    <div class="time-box">
      <div class="numbers" id="minutes-second">
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
      </div>
    </div>
    <div class="time-box">
      <div class="numbers" id="seconds-first">
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </div>
    </div>
    <div class="time-box">
      <div class="numbers" id="seconds-second">
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
      </div>
    </div>
  </div>
</div>
<!-- partial -->
<script>
  const h1 = document.getElementById('hours-first');
  const h2 = document.getElementById('hours-second');
  const m1 = document.getElementById('minutes-first');
  const m2 = document.getElementById('minutes-second');
  const s1 = document.getElementById('seconds-first');
  const s2 = document.getElementById('seconds-second');
  let hour1 = 0,
          hour2 = 0,
          minute1 = 0,
          minute2 = 0,
          second1 = 0;

  function handleNumber(num) {
    if (num < 10) {
      return [0, num];
    } else {
      return [Math.floor(num / 10), num % 10];
    }
  }

  function changeTime() {
    let time = new Date();
    const [h_1, h_2] = handleNumber(time.getHours());
    const [m_1, m_2] = handleNumber(time.getMinutes());
    const [s_1, s_2] = handleNumber(time.getSeconds());
    if (h_1 !== hour1) {
      hour1 = h_1;
      h1.style.transform = `translateY(-${hour1 * 30}px)`;
    }
    if (h_2 !== hour2) {
      hour2 = h_2;
      h2.style.transform = `translateY(-${hour2 * 30}px)`;
    }
    if (m_1 !== minute1) {
      minute1 = m_1;
      m1.style.transform = `translateY(-${minute1 * 30}px)`;
    }
    if (m_2 !== minute2) {
      minute2 = m_2;
      m2.style.transform = `translateY(-${minute2 * 30}px)`;
    }
    if (s_1 !== second1) {
      second1 = s_1;
      s1.style.transform = `translateY(-${second1 * 30}px)`;
    }
    s2.style.transform = `translateY(-${s_2 * 30}px)`;
  }
  setInterval(changeTime);
</script>
</body>
</html>